<template>
  <view class="carlist">
    <view class="list-box">
      <view class="list">
        <view class="list-top">
          <view class="list-top1">
            <image src="../../static/carlist-car.png" ></image>
          </view>
          <view class="list-top2">
            <view>奥迪A6 2020款 豪华动感型</view>
            <view>车架号：234345362436</view>
          </view>
          <view class="list-top3">
            <image src="../../static/carlist-right.png"></image>
          </view>
        </view>
        <view class="list-bottom">
          <view class="b1">
            <image src="../../static/carlist-1.png" ></image>
            <view>默认</view>
          </view>
          <view class="b2">
            <view class="b1">
              <image src="../../static/carlist-2.png" ></image>
              <view>编辑</view>
            </view>
            <view class="b1">
              <image src="../../static/carlist-3.png" ></image>
              <view>删除</view>
            </view>
          </view>
        </view>
      </view>
      <view class="list">
        <view class="list-top">
          <view class="list-top1">
            <image src="../../static/carlist-car.png" ></image>
          </view>
          <view class="list-top2">
            <view>奥迪A6 2020款 豪华动感型</view>
            <view>车架号：234345362436</view>
          </view>
          <view class="list-top3">
            <image src="../../static/carlist-right.png" ></image>
          </view>
        </view>
        <view class="list-bottom">
          <view class="b1">
            <image src="../../static/carlist-1.png" ></image>
            <view>默认</view>
          </view>
          <view class="b2">
            <view class="b1">
              <image src="../../static/carlist-2.png" ></image>
              <view>编辑</view>
            </view>
            <view class="b1">
              <image src="../../static/carlist-3.png" ></image>
              <view>删除</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="button">
      <uv-button
        text="+添加新车辆"
        color="#FC4424"
        shape="circle"
      ></uv-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss">
.carlist {
  position: relative;
  background-color: #f5f5f5;
  height: 570px;
  .list-box {
    padding-top: 20px;
    width: 90%;
    margin: auto;
    .list {
      border-radius: 10px;
      background-color: #fff;
      margin-bottom: 15px;

      padding: 8px;
      .list-top {
        display: flex;
        justify-content: space-between;
        .list-top1 {
          border-radius: 50%;
          background-color: #ffece9;
          width: 30px;
          height: 30px;
          padding: 6px;
          image {
            width: 100%;
            height:100%;
          }
        }
        .list-top2 {
          view:nth-child(2) {
            color: #b0b0b0;
            font-size: 13px;
          }
        }
        .list-top3 {
          width: 5%;
          line-height: 50px;
          image {
            width: 100%;
            height:20px;
          }
        }
      }
      .list-bottom {
        border-top: 2px solid #f5f5f5;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        view image {
          width: 20px;
          height: 20px;
        }
        .b1 {
          line-height: 20px;
          display: flex;
        }
        .b2 {
          display: flex;
          justify-content: space-between;
          width: 35%;
        }
      }
    }
  }
  .button {
    position: absolute;
    bottom: -45px;left:20px;
    width:90%;
  }
}
</style>
